<!-- 商家入驻 -->
<template>
  <div class="add-business">
    <van-nav-bar fixed title="商家入驻" safe-area-inset-top>
      <template #left>
        <img
          style="width: 30px; margin-right: 10px"
          src="../../assets/images/返回2.png"
          @click="() => $router.go(-1)"
          alt=""
        />
        <img
          style="width: 30px"
          @click="() => $router.push({ path: '/' })"
          src="../../assets/images/返回首页.png"
          alt=""
        />
      </template>
    </van-nav-bar>
    <!-- form -->
    <van-form @submit="onSubmit" label-width="1.6rem">
      <div class="title1"></div>
      <van-field
        v-model="form.name"
        name="商家名称"
        label="商家名称"
        placeholder="请输入商家名称"
        :rules="[{ required: true, message: '请输入商家名称' }]"
      />
      <van-field
        readonly
        clickable
        right-icon="arrow"
        name="area"
        :value="form.address"
        label="商家地区"
        placeholder="请选择商家地区"
        @click="show.addressshow = true"
      />
      <van-popup v-model="show.addressshow" position="bottom">
        <van-area
          :area-list="areaList"
          @confirm="onConfirm"
          @cancel="show.addressshow = false"
        />
      </van-popup>
      <van-field
        readonly
        clickable
        right-icon="arrow"
        name="picker"
        :value="form.detailaddress"
        label="详细地址"
        placeholder="请选择详细地址"
        @click="show.industryshow = true"
      >
        <template #right-icon>
          <van-icon name="location-o" />
        </template>
      </van-field>
      <van-popup v-model="show.industryshow" position="bottom">
        <van-picker
          show-toolbar
          :columns="options.industryoptions"
          @confirm="industryConfirm"
          @cancel="show.industryshow = false"
        />
      </van-popup>
      <van-field
        readonly
        clickable
        right-icon="arrow"
        name="picker"
        :value="form.industry"
        label="所属行业"
        placeholder="请选择所属行业"
        @click="show.industryshow = true"
      />
      <van-popup v-model="show.industryshow" position="bottom">
        <van-picker
          show-toolbar
          :columns="options.industryoptions"
          @confirm="industryConfirm"
          @cancel="show.industryshow = false"
        />
      </van-popup>
      <van-field
        readonly
        clickable
        right-icon="arrow"
        name="picker"
        :value="form.scale"
        label="商家规模"
        placeholder="请选择商家规模"
        @click="show.scaleshow = true"
      />
      <van-popup v-model="show.scaleshow" position="bottom">
        <van-picker
          show-toolbar
          :columns="options.scaleoptions"
          @confirm="scaleConfirm"
          @cancel="show.scaleshow = false"
        />
      </van-popup>
      <van-field
        v-model="form.phone"
        type="tel"
        name="联系电话"
        label="联系电话"
        placeholder="请输入联系电话"
        :rules="[{ required: true, message: '请输入联系电话' }]"
      />
      <van-field
        v-model="form.details"
        name="商家介绍"
        rows="3"
        autosize
        type="textarea"
        placeholder="请填写商家介绍"
      />
      <!-- 商家图片 -->
      <div class="title2">商家图片</div>
      <van-field name="uploader" label="商家logo">
        <template #right-icon>
          <span>请上传商家logo或门头图</span>
        </template>
      </van-field>
      <van-field name="uploader">
        <template #input>
          <van-uploader v-model="form.logo" :max-count="1" />
        </template>
      </van-field>

      <van-field name="uploader" label="客服微信二维码" label-width="3rem">
        <template #right-icon>
          <span>请上传客服微信二维码</span>
        </template>
      </van-field>
      <van-field name="uploader">
        <template #input>
          <van-uploader v-model="form.service" :max-count="1" />
        </template>
      </van-field>

      <van-field name="uploader" label="商家相册">
        <template #right-icon>
          <span>最多可上传9张图片</span>
        </template>
      </van-field>
      <van-field name="uploader">
        <template #input>
          <van-uploader v-model="form.photo" :max-count="9" />
        </template>
      </van-field>

      <van-field name="uploader" label="商家视频">
        <template #right-icon>
          <span>最大上传100MB视频</span>
        </template>
      </van-field>
      <van-field name="uploader">
        <template #input>
          <van-uploader v-model="form.video" :max-count="5" />
        </template>
      </van-field>

      <!-- 入驻方式 -->
      <div class="title1"></div>
      <div>
        <van-cell title="请选择入驻方式">
          <template #default>
            <span style="color: #3e96e8">版本区别</span>
          </template>
        </van-cell>
        <div class="type">
          <div
            :class="form.type === 1 ? 'item active' : 'item'"
            @click="change(1)"
          >
            <div>正式版</div>
            <div>1年/19999元</div>
            <div>每天<span>前5条</span>信息免费</div>
            <div>支持上传视频</div>
          </div>
          <div
            :class="form.type === 2 ? 'item active' : 'item'"
            @click="change(2)"
          >
            <div>试用版</div>
            <div>1年/免费</div>
            <div>每天<span>前1条</span>信息免费</div>
            <div>支持上传视频</div>
          </div>
        </div>
      </div>
      <div class="totip">
        <van-checkbox v-model="form.checked" shape="square">
          阅读并同意<span>&lt;&lt;用户协议条款&gt;&gt;</span>
        </van-checkbox>
      </div>
      <div style="padding: 0.4rem 2rem; background: #fff">
        <van-button round block type="info" native-type="submit"
          >确认入驻</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
export default {
  name: "",
  data() {
    return {
      areaList,
      show: {
        addressshow: false,
        industryshow: false,
        scaleshow: false,
      },
      options: {
        industryoptions: ["杭州", "宁波", "温州", "嘉兴", "湖州"],
        scaleoptions: ["杭州", "宁波", "温州", "嘉兴", "湖州"],
      },
      form: {
        name: "",
        address: "",
        detailaddresstype: "",
        industry: "",
        scale: "",
        phone: "",
        details: "",
        logo: [],
        service: [],
        photo: [],
        video: [],
        type: 1,
        checked:true
      },
    };
  },
  methods: {
    // 表单提交
    onSubmit(values) {
      console.log("submit", values);
    },

    // 商家规模
    scaleConfirm(value) {
      this.form.scale = value;
      this.show.scaleshow = false;
    },
    // 选择行业
    industryConfirm(value) {
      this.form.industry = value;
      this.show.industryshow = false;
    },
    // 地址选择
    onConfirm(value) {
      this.form.address = value
        .filter((item) => !!item)
        .map((item) => item.name)
        .join(",");
      this.show.addressshow = false;
    },
    // 选择版本
    change(val) {
      this.form.type = val;
    },
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
.active {
  border: 1px solid rgb(40, 125, 236) !important;
  background-color: rgb(222, 242, 251);
}
.add-business {
  width: 100%;
  padding-top: 92px;
  .totip {
    padding: 30px;
    background-color: #fff;
    span {
      color: #3e96e8;
    }
  }
  .type {
    width: 100%;
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    background-color: #fff;

    .item {
      width: 48%;
      padding: 30px;
      text-align: center;
      font-size: 28px;
      border: 1px solid #eee;
      border-radius: 25px;
      > :first-child,
      > :nth-child(2) {
        font-weight: bold;
        font-size: 32px;
        margin-bottom: 10px;
      }
      span {
        color: #3e96e8;
      }
      > :last-child {
        width: 80%;
        background-color: rgb(40, 125, 236);
        color: #fff;
        line-height: 50px;
        margin: 10px auto 0;
        border-radius: 25px;
      }
    }
  }
  .title1 {
    height: 20px;
  }
  .title2 {
    padding: 20px;
    color: rgb(171, 171, 171);
  }
}
</style>